<template>
  <div class="app-container">
    <div class="chart-container">
      <!-- 成绩分布图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>随堂测试成绩分布</span>
        </div>
        <div id="score-distribution" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 答题时间分析图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>答题时间分析</span>
        </div>
        <div id="time-analysis" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 错题类型分析图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>错题类型分析</span>
        </div>
        <div id="error-analysis" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 知识点掌握情况图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>知识点掌握情况</span>
        </div>
        <div id="knowledge-mastery" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import learningProcessData from '@/mock/learning-process'
// import shuxueData from './shuxue'

export default {
  name: 'QuizAnalysis',
  data() {
    return {
      // 成绩区间
      scoreRanges: ['3-5分', '6-7分', '8-10分'],
      // 知识点列表
      knowledgePoints: [
        '一次函数概念',
        '函数图像绘制',
        '实际问题应用',
        '函数性质',
        '综合运用'
      ],
      // 错题类型
      errorTypes: [
        '概念理解错误',
        '计算错误',
        '图像绘制错误',
        '实际问题建模错误',
        '综合运用错误'
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.drawScoreDistribution()
      this.drawTimeAnalysis()
      this.drawErrorAnalysis()
      this.drawKnowledgeMastery()
    },
    // 绘制成绩分布图
    drawScoreDistribution() {
      const chart = echarts.init(document.getElementById('score-distribution'))
      const option = {
        title: {
          text: '随堂测试成绩分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.scoreRanges
        },
        series: [
          {
            name: '成绩分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 13, name: '3-5分' },
              { value: 22, name: '6-7分' },
              { value: 15, name: '8-10分' }
            ]
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制答题时间分析图
    drawTimeAnalysis() {
      const chart = echarts.init(document.getElementById('time-analysis'))
      const option = {
        title: {
          text: '答题时间分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['平均答题时间', '最长答题时间', '最短答题时间'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.scoreRanges
        },
        yAxis: {
          type: 'value',
          name: '时间(分钟)'
        },
        series: [
          {
            name: '平均答题时间',
            type: 'bar',
            data: [18, 15, 12],
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '最长答题时间',
            type: 'bar',
            data: [25, 20, 15],
            itemStyle: {
              color: '#F56C6C'
            }
          },
          {
            name: '最短答题时间',
            type: 'bar',
            data: [10, 8, 6],
            itemStyle: {
              color: '#67C23A'
            }
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制错题类型分析图
    drawErrorAnalysis() {
      const chart = echarts.init(document.getElementById('error-analysis'))
      const option = {
        title: {
          text: '错题类型分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['错误人数', '错误率'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.errorTypes,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '错误人数',
            min: 0,
            max: 50,
            interval: 10
          },
          {
            type: 'value',
            name: '错误率',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '错误人数',
            type: 'bar',
            data: [35, 28, 42, 45, 30]
          },
          {
            name: '错误率',
            type: 'line',
            yAxisIndex: 1,
            data: [70, 56, 84, 90, 60]
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制知识点掌握情况图
    drawKnowledgeMastery() {
      const chart = echarts.init(document.getElementById('knowledge-mastery'))
      const option = {
        title: {
          text: '知识点掌握情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['掌握率', '平均得分'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.knowledgePoints,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '掌握率',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          },
          {
            type: 'value',
            name: '平均得分',
            min: 0,
            max: 10,
            interval: 2
          }
        ],
        series: [
          {
            name: '掌握率',
            type: 'bar',
            data: [85, 65, 45, 75, 60]
          },
          {
            name: '平均得分',
            type: 'line',
            yAxisIndex: 1,
            data: [8.5, 6.5, 4.5, 7.5, 6.0]
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}
</style>
